﻿<common:LayoutAwarePage x:Class="KouDai.WinPad.Views.ShellPage"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:Control="using:KouDai.WinPad.Controls"
                        xmlns:WRCControl="using:WRCControl"
                        xmlns:cal="using:Caliburn.Micro"
                        xmlns:common="using:KouDai.WinPad.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:i="using:Windows.UI.Interactivity"
                        xmlns:local="using:KouDai.WinPad.Views"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:vm="using:KouDai.WinPad.ViewModels"
                        x:Name="pageRoot"
                        d:DataContext="{d:DesignInstance Type=vm:ShellPageViewModel,
                                                         IsDesignTimeCreatable=True}"
                        mc:Ignorable="d">

    <Page.Resources>

        <!--  Collection of items displayed by this page  -->
        <CollectionViewSource x:Name="CollectionSource"
                              IsSourceGrouped="true"
                              Source="{Binding GroupItems}"
                              d:Source="{Binding GroupItems,
                                                 Source={d:DesignInstance Type=vm:ShellPageViewModel,
                                                                          IsDesignTimeCreatable=True}}" />

        <Style x:Key="CategoryContainerStyle" TargetType="GroupItem">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupItem">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <ContentControl x:Name="HeaderContent"
                                                Margin="{TemplateBinding Padding}"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                                IsTabStop="False"
                                                TabIndex="0" />
                                <ItemsControl x:Name="ItemsControl"
                                              Grid.Row="1"
                                              Margin="0,0,0,50"
                                              IsTabStop="False"
                                              ItemsSource="{Binding GroupItems}"
                                              TabIndex="1"
                                              TabNavigation="Once">
                                    <ItemsControl.ItemContainerTransitions>
                                        <TransitionCollection>
                                            <AddDeleteThemeTransition />
                                            <ContentThemeTransition />
                                            <ReorderThemeTransition />
                                            <EntranceThemeTransition IsStaggeringEnabled="False" />
                                        </TransitionCollection>
                                    </ItemsControl.ItemContainerTransitions>
                                </ItemsControl>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CommonContainerStyle" TargetType="GroupItem">
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="GroupItem">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <ContentControl x:Name="HeaderContent"
                                                Margin="{TemplateBinding Padding}"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                                IsTabStop="False"
                                                TabIndex="0" />
                                <ItemsControl x:Name="ItemsControl"
                                              Grid.Row="1"
                                              IsTabStop="False"
                                              ItemsSource="{Binding GroupItems}"
                                              TabIndex="1"
                                              TabNavigation="Once">
                                    <ItemsControl.ItemContainerTransitions>
                                        <TransitionCollection>
                                            <AddDeleteThemeTransition />
                                            <ContentThemeTransition />
                                            <ReorderThemeTransition />
                                            <EntranceThemeTransition IsStaggeringEnabled="False" />
                                        </TransitionCollection>
                                    </ItemsControl.ItemContainerTransitions>
                                </ItemsControl>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Control:ShellContainerStyleSelector x:Key="ContainerStyleSelector"
                                             CategoryContainerStyle="{StaticResource CategoryContainerStyle}"
                                             CommonContainerStyle="{StaticResource CommonContainerStyle}" />


        <DataTemplate x:Key="CategoryTemplate">
            <Grid Background="{StaticResource ImageWallBackBrush}">
                <Image Source="{Binding ImageUrlForIphone}" Stretch="Fill" />
            </Grid>

        </DataTemplate>
        <DataTemplate x:Key="ImageTemplate">
            <Grid Background="{StaticResource ImageWallBackBrush}">
                <Image Source="{Binding ImageUrlForIphone}" Stretch="UniformToFill" />
                <Border HorizontalAlignment="Left"
                        VerticalAlignment="Bottom"
                        Background="{StaticResource PriceBackgroundBrush}">
                    <TextBlock Margin="5,0,5,0"
                               HorizontalAlignment="Left"
                               FontFamily="Arial"
                               FontSize="15"
                               Foreground="{StaticResource CommonWhiteBrush}"
                               Text="{Binding Price}" />
                </Border>
            </Grid>
        </DataTemplate>
        <Control:ShellDataTemplateSelector x:Key="GridViewTemplateSelector"
                                           CategoryTemplate="{StaticResource CategoryTemplate}"
                                           ImageTemplate="{StaticResource ImageTemplate}" />

        <Control:ShellZoomOutDataTemplateSelector x:Key="ZoomOutTemplate">
            <Control:ShellZoomOutDataTemplateSelector.ZoomOutTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <StackPanel Grid.Row="0" Orientation="Horizontal">
                            <TextBlock Margin="3,-7,10,10"
                                       Style="{StaticResource GroupHeaderTextStyle}"
                                       Text="{Binding Group.Key.GroupName}" />
                            <TextBlock Margin="0,-7,0,10"
                                       Style="{StaticResource GroupHeaderTextStyle}"
                                       Text="&gt;" />
                        </StackPanel>
                        <!--  <Image Source="{Binding Group.Key.ImageUrl}" />  -->
                        <Image Grid.Row="1"
                               Source="{Binding Group.Key.ImageUrl}"
                               Stretch="UniformToFill" />

                        <!--
                            <TextBlock FontFamily="Segoe UI Light"
                            FontSize="24"
                            Text="{Binding Group.Key.GroupName}" />
                        -->

                    </Grid>
                </DataTemplate>
            </Control:ShellZoomOutDataTemplateSelector.ZoomOutTemplate>
            <Control:ShellZoomOutDataTemplateSelector.ZoomOutCategoryTemplate>
                <DataTemplate>
                    <Grid />
                </DataTemplate>
            </Control:ShellZoomOutDataTemplateSelector.ZoomOutCategoryTemplate>
        </Control:ShellZoomOutDataTemplateSelector>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <SemanticZoom x:Name="semanticZoom" Grid.RowSpan="2">

            <SemanticZoom.ZoomedOutView>
                <GridView x:Name="OutGridView"
                          IsSwipeEnabled="False"
                          ItemTemplateSelector="{StaticResource ZoomOutTemplate}"
                          Padding="116,136,116,46"
                          ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                          SelectionMode="None">

                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid VerticalAlignment="Center"
                                      ItemHeight="250"
                                      ItemWidth="350"
                                      MaximumRowsOrColumns="2" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </SemanticZoom.ZoomedOutView>

            <SemanticZoom.ZoomedInView>
                <Control:CustomGridView x:Name="itemGridView"
                                        AutomationProperties.AutomationId="ItemsGridView"
                                        AutomationProperties.Name="Items"
                                        FontFamily="Global User Interface"
                                        IsItemClickEnabled="True"
                                        IsSwipeEnabled="false"
                                        ItemTemplateSelector="{StaticResource GridViewTemplateSelector}"
                                        ItemsSource="{Binding Source={StaticResource CollectionSource}}"
                                        Padding="116,136,116,46"
                                        ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                                        SelectionMode="None"
                                        TabIndex="1"
                                        cal:Message.Attach="[Event ItemClick] = [Action ItemSelect($eventArgs)]">
                    <Control:CustomGridView.GroupStyle>
                        <GroupStyle ContainerStyleSelector="{StaticResource ContainerStyleSelector}"
                                    HeaderTemplate="{StaticResource GrouopHeaderDataTemplate}"
                                    HidesIfEmpty="True">
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Margin="0,20,30,0"
                                                           VerticalAlignment="Stretch"
                                                           ItemHeight="80"
                                                           ItemWidth="80"
                                                           MaximumRowsOrColumns="6"
                                                           Orientation="Vertical" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </Control:CustomGridView.GroupStyle>
                    <Control:CustomGridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                            <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        </Style>
                    </Control:CustomGridView.ItemContainerStyle>
                    <Control:CustomGridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Margin="0,30,0,0"
                                                    Loaded="VirtualizingStackPanel_Loaded"
                                                    Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </Control:CustomGridView.ItemsPanel>
                </Control:CustomGridView>

            </SemanticZoom.ZoomedInView>

        </SemanticZoom>



        <!--  Vertical scrolling list only used when snapped  -->
        <ListView x:Name="itemListView"
                  Grid.Row="1"
                  Margin="0,10,0,0"
                  AutomationProperties.AutomationId="ItemsListView"
                  AutomationProperties.Name="Items"
                  IsItemClickEnabled="True"
                  IsSwipeEnabled="false"
                  ItemTemplate="{StaticResource SanpDataTemplate}"
                  ItemsSource="{Binding ZoomOutItems}"
                  Padding="10,0,0,60"
                  SelectionMode="None"
                  TabIndex="1"
                  Visibility="Collapsed"
                  cal:Message.Attach="[Event ItemClick]=[Action ListItemClick($eventArgs)]"
                  d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True,
                                                   Type=vm:ShellPageViewModel}" />

        <!--  Back button and page title  -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="GoBack" Style="{StaticResource BackButtonStyle}" />
            <Image x:Name="ImageTitle"
                   Grid.Column="1"
                   IsHitTestVisible="false"
                   Source="ms-appx:///Assets/Images/shell_logo.png"
                   Style="{StaticResource PageHeaderImageStyle}" />
            <Border Grid.ColumnSpan="2"
                    VerticalAlignment="Bottom"
                    BorderBrush="#FFEFEFEF"
                    BorderThickness="1,1,1,1" />
        </Grid>
        <VisualStateManager.VisualStateGroups>

            <!--  Visual states reflect the application's view state  -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!--  The entire page respects the narrower 100-pixel margin convention for portrait  -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoBack" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,136,86,56" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GoBack" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ImageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageImageStyle}" />
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="semanticZoom" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ImageTitle">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>25,0,0,20</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
